<template>
  <el-menu
    class="el-menu-vertical"
    :default-active="$route.path"
    :default-openeds="defaultOpeneds"
    router
  >
    <template v-for="item in routes">
      <el-submenu v-if="item.children" :key="item.path" :index="item.path">
        <template #title>
          <i :class="item.Icon"></i>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item
          v-for="child in item.children"
          :key="child.path"
          :index="resolvePath(item.path, child.path)"
        >
          {{ child.title }}
        </el-menu-item>
      </el-submenu>
      <el-menu-item v-else :key="item.path" :index="item.path">
        <i :class="item.Icon"></i>
        <span>{{ item.title }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script>
export default {
  props: ["routes"],
  computed: {
    defaultOpeneds() {
      console.log(this.$route, "----");

      return [this.$route.matched[0]?.path];
    },
  },
  methods: {
    resolvePath(parentPath, childPath) {
      console.log(parentPath, childPath, "====");
      return `${parentPath}/${childPath}`.replace(/\/+/g, "/");
    },
  },
};
</script>

<style>
.el-menu-vertical {
  width: 200px;
  height: 100%;
}
</style>
